<template>
	<view class="prescInfo-wrap" v-if="recipeForm">
		<web-view v-if="recipeForm.caFileUrl" :src="recipeForm.caFileUrl"></web-view>
		<template v-else>
			<view class="prescInfo-main">
				<view class="layer1">
					<view class="word3">{{ recipeForm.id }}</view>
					<view class="info1">{{ recipeForm.time }}</view>
				</view>
				<view class="word4">{{ mpName }}处方笺</view>
			
				<view class="layer2">
					<view class="layer3">
						<view class="word5">医生姓名：</view>
						<view class="word6">{{ doctorName }}</view>
					</view>
					<view class="layer3">
						<view class="word5">患者姓名：</view>
						<view class="word6">{{ recipeForm.patient.patientName }}</view>
					</view>
					<view class="layer3">
						<view class="word5">患者年龄：</view>
						<view class="word6">{{ recipeForm.patient.age }}岁</view>
					</view>
					<view class="layer3">
						<view class="word5">患者性别：</view>
						<view class="word6">{{ rangeSex[recipeForm.patient.sex].text }}</view>
					</view>
					<view class="layer3" v-if="recipeForm.status == 4">
						<view class="word5">驳回原因：</view>
						<view class="word6">{{ recipeForm.reason || '-' }}</view>
					</view>
				</view>
			</view>
			
			<view class="prescInfo-box">
				<u-title value="诊断"></u-title>
				<view class="prescInfo-diagnose">{{ recipeForm.diagnose }}</view>
			
				<u-title value="药品信息"></u-title>
				<view class="prescInfo-drug-list">
					<u-show-goods v-for="(item, index) in recipeForm.recipeDetailDTO" :showRecipe="true" type="0"
						:data="item" :key="index"></u-show-goods>
				</view>
			</view>
			
			<view class="prescInfo-form" v-if="recipeForm.recipeType == 1">
				<uni-forms label-width="100" ref="form" err-show-type="toast">
					<uni-forms-item label="用药数量" name="commodityNum">
						<view class="prescInfo-form-text">
							{{recipeForm.drugUseVo.commodityNum}}
						</view>
			
					</uni-forms-item>
					<uni-forms-item label="用药频率" name="frequency">
						<view class="prescInfo-form-text">
							{{recipeForm.drugUseVo.frequency}}
						</view>
			
					</uni-forms-item>
			
					<uni-forms-item label="单次用量" name="onceDosage">
						<view class="prescInfo-form-text">
							{{recipeForm.drugUseVo.onceDosage}}
						</view>
			
					</uni-forms-item>
					<uni-forms-item label="用药方法" name="useMethod">
						<view class="prescInfo-form-text">
							{{recipeForm.drugUseVo.useMethod}}
						</view>
			
					</uni-forms-item>
					<uni-forms-item label="备注" name="remark" :borderBottom="false"></uni-forms-item>
					<view class="prescInfo-form-text2">
						{{recipeForm.drugUseVo.remark}}
					</view>
			
				</uni-forms>
			</view>
			
			<u-bottom-button v-if="role == 2 && recipeForm.status == 0" type="2" value1="审核不通过" value2="审核通过"
				@clickOne="auditRecipe(4)" @clickTwo="auditRecipe(1)"></u-bottom-button>
			
			<u-bottom-button v-if="recipeForm.status == 1 && role == 0" type="3" value2="立即购药"
				@clickTwo="gotoRouter('/pages-mall/orderCreate/orderCreate?orderCode=' + recipeForm.drugOrderCode)"></u-bottom-button>
			
			<u-bottom-button v-if="recipeForm.status == 0 && role == 0" type="3" value2="处方审核中"></u-bottom-button>
			
			<uni-popup ref="popup" type="center" @maskClick.stop="onclose">
				<view class="popup_bos">
					<view class="popup_head">不通过原因</view>
					<view class="popup_box">
						<view class="form_bos" style="display: block;">
							<textarea placeholder-style="color:#BEBDC5" class="textarea" v-model="reason"
								@input="onInput" placeholder="请输入" />
						</view>
					</view>
					<view class="bnt_bos">
						<view @click="onclose" class="bnt bnt1">取消</view>
						<view @click="onConfirm" class="bnt bnt2">确认</view>
					</view>
				</view>
			</uni-popup>
		</template>
	</view>
</template>

<script>
	import uTitle from '@/components/u-title/u-title.vue';
	import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
	import uShowGoods from '@/components/u-show-goods/u-show-goods.vue';
	import uniEasyinput from '@/components/uni/uni-easyinput/uni-easyinput.vue';
	import uniForms from '@/components/uni/uni-forms/uni-forms.vue';
	import uniFormsItem from '@/components/uni/uni-forms-item/uni-forms-item.vue';
	import uniPopup from '@/components/uni/uni-popup/uni-popup.vue';
	export default {
		components: {
			uBottomButton,
			uTitle,
			uShowGoods,
			uniForms,
			uniFormsItem,
			uniEasyinput,
			uniPopup
		},
		data() {
			return {
				id: null,
				role: 0, //当前身份  0患者  1医生 2药师
				recipeForm: null,
				doctorId: null,
				hospName: null,
				doctorName: null,
				mpName: "",
				reason:""
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.role = options.role ? options.role : 0;
		},
		onShow() {
			this.getUserRecipeDetail();
			this.queryMpInfo();
		},
		methods: {
			queryMpInfo() {
				this.$api.getMpConfig().then(res => {
					if (res.code == 200) {
						this.mpName = res.result.contentInfo.plantName;
					}
				})
			},
			//药师审核处方
			auditRecipe(status) {
				if (status == 4) {
					this.$refs.popup.open()
					return
				}
				let message = status == 1 ? '审核通过' : '审核不通过';
				uni.showModal({
					title: `确认要${message}吗？`,
					success: res => {
						if (res.confirm) {
							this.$api
								.auditRecipe({
									params: {
										id: this.id,
										status: status
									}
								})
								.then(res => {
									if (res.code == 200) {
										this.getUserRecipeDetail();
										uni.showToast({
											title: '操作成功',
											icon: 'success'
										});
										setTimeout(() => {
											uni.navigateBack({
												delta: 1,
												animationType: 'slide-out-right',
												animationDuration: 200
											});
										}, 1000)
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none'
										});
									}
								});
						}
					}
				});
			},
			onInput(res) {
				this.reason = res.detail.value
			},
			onConfirm() {
				this.$api
					.auditRecipe({
						params: {
							id: this.id,
							status: 4,
							reason:this.reason
						}
					})
					.then(res => {
						if (res.code == 200) {
							this.onclose()
							this.reason = ''
							this.getUserRecipeDetail();
							uni.showToast({
								title: '操作成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
									animationType: 'slide-out-right',
									animationDuration: 200
								});
							}, 1000)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			},

			//处方详情
			getUserRecipeDetail() {
				this.$api
					.getUserRecipeDetail({
						params: {
							id: this.id
						}
					})
					.then(res => {
						if (res.code == 200) {
							res.result.recipeDetailDTO.forEach((key, index) => {
								key.commodity.buyNum = key.commodityNum;
								res.result.recipeDetailDTO[index] = {
									...key.commodity,
									...key
								};
							});
							this.recipeForm = res.result;
							this.doctorId = this.recipeForm.doctorId;
							this.queryDoctorDetail();
							this.recipeForm.time = this.recipeForm.createdTime.substr(0, 10);
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			},
			
			onclose() {
				this.$refs.popup.close()
			},

			//医生详情
			queryDoctorDetail() {
				this.$api
					.queryDoctorDetail({
						params: {
							id: this.doctorId
						}
					})
					.then(res => {
						if (res.code == 200) {
							this.hospName = res.result.hospName;
							this.doctorName = res.result.doctorName;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			}
		}
	};
</script>

<style lang="less">
	.popup_bos {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.popup_head {
			width: 690rpx;
			border-bottom: 1rpx solid #E7E6EF;
			height: 108rpx;
			text-align: center;
			line-height: 108rpx;
			font-weight: 800;
			font-size: 32rpx;
			color: #222A42;
		}

		.popup_box {
			width: 618rpx;
			padding: 10rpx 36rpx 30rpx 36rpx;

			.form_bos {
				width: 618rpx;
				display: flex;
				justify-content: space-between;


				.textarea {
					width: 598rpx;
					height: 140rpx;
					padding: 18rpx 16rpx;
					margin-top: 20rpx;
					background: #F7F7F7;
					border-radius: 8rpx;
					font-size: 26rpx;
				}
			}
		}

		.bnt_bos {
			width: 610rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(202, 208, 208, 0.2);
			display: flex;
			justify-content: center;
			padding: 24rpx 40rpx 52rpx 40rpx;

			.bnt {
				width: 200rpx;
				height: 60rpx;
				border-radius: 200rpx;
				font-weight: 500;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&.bnt1 {
					border: 1rpx solid #6E99C7;
					color: #6E99C7;
					margin-right: 30rpx;
				}

				&.bnt2 {
					background: #6E99C7;
					color: #FFFFFF;
				}
			}
		}
	}

	@import './prescInfo.less';
</style>